<button mat-raised-button (click)="onNew($event)">
  <mat-icon>add</mat-icon> 添加
</button>
<button
  mat-raised-button
  (click)="onDeleteTriggered()"
  [disabled]="!selection.hasValue()"
>
  <mat-icon>delete</mat-icon> 删除
</button>

<div class="mat-elevation-z4">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox
            (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)"
          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="name" sticky>
        <th mat-header-cell *matHeaderCellDef>姓名</th>
        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
      </ng-container>

      <ng-container matColumnDef="phone">
        <th mat-header-cell *matHeaderCellDef>手机</th>
        <td mat-cell *matCellDef="let element">{{ element.phone }}</td>
      </ng-container>

      <ng-container matColumnDef="relation">
        <th mat-header-cell *matHeaderCellDef>关系</th>
        <td mat-cell *matCellDef="let element">{{ element.relation }}</td>
      </ng-container>

      <ng-container matColumnDef="company">
        <th mat-header-cell *matHeaderCellDef>单位</th>
        <td mat-cell *matCellDef="let element">{{ element.company }}</td>
      </ng-container>

      <ng-container matColumnDef="mail">
        <th mat-header-cell *matHeaderCellDef>邮箱</th>
        <td mat-cell *matCellDef="let element">{{ element.mail }}</td>
      </ng-container>

      <ng-container matColumnDef="star" stickyEnd>
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="onEditorTriggered(element); $event.stopPropagation()"
        >
          编辑
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="rowSelection(row)"
      ></tr>
    </table>
  </div>

  <mat-paginator [pageSize]="10"></mat-paginator>
</div>

<button mat-fab class="contact-add-btn" (click)="onNew($event)"><mat-icon>person_add</mat-icon></button>
<!-- <stbui-speed-dial>
  <button mat-mini-fab>
    <mat-icon>search</mat-icon>
  </button>
  <button mat-mini-fab>
    <mat-icon>edit</mat-icon>
  </button>
  <button mat-mini-fab>
    <mat-icon>home</mat-icon>
  </button>
</stbui-speed-dial> -->